<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>CSS3手机端侧滑菜单 4种滑动菜单特效DEMO演示3</title>
	<!--<link rel="stylesheet" type="text/css" href="css/normalize.css" />-->
	<link rel="stylesheet" type="text/css" href="css/default.css">
	<style type="text/css">
	/*Fontawesome Iconfont*/
	@import url(http://libs.useso.com/js/font-awesome/4.0.1/css/font-awesome.min.css);
	@import url(http://fonts.useso.com/css?family=Montserrat);
		* {margin: 0; padding: 0;}
		li {list-style-type: none;}

		.grid {float: left;}
		.grid > li { width: 285px; height: 500px; overflow: hidden; float: left; margin: 20px 0 20px 30px; position: relative; }
		.grid > li:hover {box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.5);}

		.grid>li section {position: relative; transition: all 0.25s; width: 100%;}
		.grid>li h2 {font: bold 14px montserrat; color: #fff; text-transform: uppercase; position: absolute; text-align: center; width: 60%; left: 20%; top: 100px; padding: 10px 0; border: 2px solid white; border-radius: 4px;}

		.sidenav { position: absolute; top: 0; left: 0; bottom: 0; background: linear-gradient(rgba(50,60,60, 1), rgba(50,60,60, 0.7)); width: 50px; transition: all 0.25s; overflow: hidden; padding-top: 100px;}
		.sidenav li { _overflow: hidden; width: 150px; }
		.sidenav a { text-decoration: none; color: #eee;  display: block; line-height: 48px;  }
		.sidenav span {display: block;}
		.sidenav b { padding-left 10px; display: block; color: white; font-family: Montserrat; font-size: 12px; line-height: 4; opacity: 0; }
		.sidenav a i { display: block; float: left; font-size: 16px; line-height: 48px; width: 50px; text-align: center; }

		/*All instances*/
		.grid>li:hover .sidenav {width: 150px;}
		.grid>li:hover section {margin-left: 150px;}
		.grid>li:hover b {opacity: 1;}

		.sidenav li:nth-child(1) b, .sidenav li:nth-child(1) a {transition-delay: .08s;}
		.sidenav li:nth-child(2) b, .sidenav li:nth-child(2) a {transition-delay: .16s;}
		.sidenav li:nth-child(3) b, .sidenav li:nth-child(3) a {transition-delay: .24s;}
		.sidenav li:nth-child(4) b, .sidenav li:nth-child(4) a {transition-delay: .32s;}
		.sidenav li:nth-child(5) b, .sidenav li:nth-child(5) a {transition-delay: .40s;}
		.sidenav li:nth-child(6) b, .sidenav li:nth-child(6) a {transition-delay: .48s;}

		/*Five*/
		.five b {transform: scale(0); opacity: 0;}
		.five:hover b {transform: scale(1);  opacity: 1; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
		.five i {transform: scale(0); opacity: 0;}
		.five:hover i {transform: scale(1);  opacity: 1; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);}

		.sidenav li:nth-child(1) i {transition-delay: .48s;}
		.sidenav li:nth-child(2) i {transition-delay: .40s;}
		.sidenav li:nth-child(3) i {transition-delay: .32s;}
		.sidenav li:nth-child(4) i {transition-delay: .24s;}
		.sidenav li:nth-child(5) i {transition-delay: .16s;}
		.sidenav li:nth-child(6) i {transition-delay: .08s;}

		/*Six*/
		.six a {transform: scale(1.5); opacity: 0;}
		.six:hover a {transform: scale(1);  opacity: 1; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
	</style>
	<!--[if IE]>
		<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body>
	<div class="htmleaf-container">
		<header class="htmleaf-header bgcolor-11">
			<div class="htmleaf-demo center">
			  <a href="index.html">DEMO1</a>
			  <a href="index2.html">DEMO2</a>
			  <a href="index3.html" class="current">DEMO3</a>
			  <a href="index4.html">DEMO4</a>
			</div>
			<div style="text-align:center;clear:both;">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
		</header>
		<div class="htmleaf-content bgcolor-8">
		<ul class="grid">
			<li class="five">
				<ul class="sidenav">
					<li><a><i class="fa fa-check"></i><b>Tasks</b></a></li>
					<li><a><i class="fa fa-inbox"></i><b>Messages</b></a></li>
					<li><a><i class="fa fa-pencil"></i><b>New Post</b></a></li>
					<li><a><i class="fa fa-cog"></i><b>Settings</b></a></li>
					<li><a><i class="fa fa-star"></i><b>Starred</b></a></li>
					<li><a><i class="fa fa-power-off"></i><b>Logout</b></a></li>
				</ul>
				<section><h2>Ripple Effect</h2><img src="img/mb5.png"/></section>
			</li>
			<li class="six">
				<ul class="sidenav">
					<li><a><i class="fa fa-check"></i><b>Tasks</b></a></li>
					<li><a><i class="fa fa-inbox"></i><b>Messages</b></a></li>
					<li><a><i class="fa fa-pencil"></i><b>New Post</b></a></li>
					<li><a><i class="fa fa-cog"></i><b>Settings</b></a></li>
					<li><a><i class="fa fa-star"></i><b>Starred</b></a></li>
					<li><a><i class="fa fa-power-off"></i><b>Logout</b></a></li>
				</ul>
				<section><h2>Scroll Down</h2><img src="img/mb6.png"/></section>
			</li>
		</ul>
		</div>
	</div>
</body>
</html>